<template>
  <div class="user-view">
    <header>
      <div class="set">
        <i class="toggle"></i>
        <i class="set-up"></i>
      </div>
    </header>

    <main>
      <div class="user">
        <div class="user-img">
          <img
            src="https://avaimg.lf127.net/img/13389b35257537f1/Ymk3cHNHRG5PRmtyL1Y4eEp3TzdpNHdUbTdqeEpLK01xckFBR0IwdktHYz0.jpg" />
        </div>
        <div class="text">
          <div class="user-name">,</div>
          <div class="id">ID: 6703826506</div>
          <div class="article">
            文章:
            <div class="num">1</div>
          </div>
        </div>
      </div>

      <div class="details">
        <div class="hot">
          <div class="num">0</div>
          <div class="txt">热度</div>
        </div>
        <div class="fans">
          <div class="num">0</div>
          <div class="txt">粉丝</div>
        </div>
        <div class="focus">
          <div class="num">3</div>
          <div class="txt">关注</div>
        </div>
      </div>

      <div class="love">
        <div class="my-love" @click="goToMyLove">
          <i></i>
          <div class="txt">我的喜欢</div>
        </div>
        <div class="my-collection" @click="goToMyCollection">
          <i></i>
          <div class="txt">我的收藏</div>
        </div>
        <div class="my-footprint" @click="goToMyFootsteps">
          <i></i>
          <div class="txt">我的足迹</div>
        </div>
      </div>

      <div class="message">
        <h3>我的消息</h3>

        <div class="list">
          <div class="like">
            <i></i>
            <div class="txt">收到的喜欢</div>
          </div>
          <div class="comments">
            <i></i>
            <div class="txt">评论</div>
          </div>
          <div class="chat">
            <i></i>
            <div class="txt">聊天</div>
          </div>
          <div class="notice">
            <i></i>
            <div class="txt">通知</div>
          </div>
        </div>
      </div>

      <div class="creation">
        <h3>创作者中心</h3>

        <div class="list">
          <div class="home">
            <i></i>
            <div class="txt">创作首页</div>
          </div>
          <div class="data">
            <i></i>
            <div class="txt">数据中心</div>
          </div>
          <div class="works">
            <i></i>
            <div class="txt">作品管理</div>
          </div>
          <div class="earnings">
            <i></i>
            <div class="txt">创造收益</div>
          </div>
        </div>
      </div>
    </main>

    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { RouterView } from 'vue-router';

const goToMyLove = () => {
  router.push({
    name: "my-love"
  });
}
const goToMyCollection = () => {
  router.push({
    name: "my-Collection"
  });
}
const goToMyFootsteps = () => {
  router.push({
    name: "my-footsteps"
  });
}
</script>

<style lang="scss" scoped>
.user-view {
  width: 100vw;
  min-height: 100vh;
  top: 0;
  left: 0;
  z-index: 8;
  background-color: #fafafa;

  header {
    width: 100vw;
    display: flex;
    justify-content: flex-end;

    .set {
      width: 27vw;
      display: flex;
      justify-content: space-between;
      align-items: center;

      i {
        width: 30px;
        height: 30px;
        margin: 0 10px;
        display: block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }

      .toggle {
        background-image: url("@/assets/images/user/qVw.png");
      }

      .set-up {
        background-image: url("@/assets/images/user/qU8.png");
      }
    }
  }

  main {
    width: 90vw;
    margin: 0 auto;

    .user {
      display: flex;
      align-items: center;
      margin: 20px 0;

      .user-img {
        width: 80px;
        height: 80px;

        img {
          width: 80px;
          height: 80px;
          border-radius: 999px;
        }
      }

      .text {
        margin-left: 10px;
        display: flex;
        flex-flow: column;

        .user-name {
          font-weight: 700;
        }

        .id {
          margin: 5px 0;
          font-size: 14px;
          color: #d0d0d0;
        }

        .article {
          display: flex;
          font-size: 14px;
          color: #d0d0d0;
          align-items: flex-end;

          .num {
            margin-left: 5px;
            font-weight: 700;
            color: #000;
          }
        }
      }
    }

    .details {
      margin: 20px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .hot,
      .fans,
      .focus {
        text-align: center;

        .num {
          font-size: 20px;
          font-weight: 700;
        }

        .txt {
          margin-top: 7px;
          font-size: 14px;
          color: #d0d0d0;
        }
      }
    }

    .love {
      margin: 20px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      i {
        width: 30px;
        height: 30px;
        display: block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }

      .txt {
        margin-top: 7px;
        font-size: 16px;
        font-weight: 700;
      }

      .my-love {
        border-radius: 15px;
        padding: 10px;
        display: flex;
        flex-flow: column;
        align-items: center;
        background-color: #fff;

        i {
          background-image: url("@/assets/images/user/5vM(1).png");
        }
      }

      .my-collection {
        border-radius: 15px;
        padding: 10px;
        display: flex;
        flex-flow: column;
        align-items: center;
        background-color: #fff;

        i {
          background-image: url("@/assets/images/user/1.png");
        }
      }

      .my-footprint {
        border-radius: 15px;
        padding: 10px;
        display: flex;
        flex-flow: column;
        align-items: center;
        background-color: #fff;

        i {
          background-image: url("@/assets/images/user/2.png");
        }
      }
    }

    .message {
      border-radius: 15px;
      padding: 10px;
      margin: 20px 0;
      background-color: #fff;

      h3 {
        font-size: 16px;
        font-weight: 700;
        margin: 0;
      }

      .list {
        padding: 12px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        i {
          width: 50px;
          height: 50px;
          display: block;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
        }

        .txt {
          font-size: 14px;
        }

        .like {
          display: flex;
          flex-flow: column;
          align-items: center;

          i {
            background-image: url("@/assets/images/user/9dt.png");
          }
        }

        .comments {
          display: flex;
          flex-flow: column;
          align-items: center;

          i {
            background-image: url("@/assets/images/user/9tV.png");
          }
        }

        .chat {
          display: flex;
          flex-flow: column;
          align-items: center;

          i {
            background-image: url("@/assets/images/user/9mU.png");
          }
        }

        .notice {
          display: flex;
          flex-flow: column;
          align-items: center;

          i {
            background-image: url("@/assets/images/user/k5i.png");
          }
        }
      }
    }

    .creation {
      border-radius: 15px;
      padding: 10px;
      margin: 20px 0;
      background-color: #fff;

      h3 {
        font-size: 16px;
        font-weight: 700;
        margin: 0;
      }

      .list {
        padding: 12px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        i {
          width: 50px;
          height: 50px;
          display: block;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
        }

        .txt {
          font-size: 14px;
        }

        .home {
          display: flex;
          flex-flow: column;
          align-items: center;

          i {
            background-image: url("@/assets/images/user/e6T.png");
          }
        }

        .data {
          display: flex;
          flex-flow: column;
          align-items: center;

          i {
            background-image: url("@/assets/images/user/v7j.png");
          }
        }

        .works {
          display: flex;
          flex-flow: column;
          align-items: center;

          i {
            background-image: url("@/assets/images/user/nU7.png");
          }
        }

        .earnings {
          display: flex;
          flex-flow: column;
          align-items: center;

          i {
            background-image: url("@/assets/images/user/SMr1.png");
          }
        }
      }
    }
  }
}
</style>